<template>
    <div class="page coach-page">
        <div class="banner">
            <div class="banner-image" style="background-image: url('/images/coach_training_banner.jpg')">
                <span>在线涨球</span>
                <p>ONLINE INFLATION</p>
            </div>
        </div>
        <div class="content">
            <PlatformCrumb back="返回" style="margin-top: 0;">
                <a style="margin-left: 10px">深圳青年足球训练营</a>
            </PlatformCrumb>
            <div class="tabs">
                <div class="tabs-con">
                    <a class="cur" :class="{active:type==0}" @click="swich(0)">免费</a>
                    <a class="cur" :class="{active:type==1}" @click="swich(1)">付费</a>
                </div>
            </div>
            <div class="tabs-container">
                <div class="tabs-con-item" v-for="(item,index) in list" :key="index">
                    <div class="image"><img :src="item.imgs|filtersImg" alt="">
                        <p class="tabs-item-title">{{item.name}}</p>
                    </div>
                    <router-link v-if="type==0" class="tabs-button"
                                 :to="{path: '/parent/onlingInflationDetails', query: {id:item.id}}">查看详情<img
                            src="/images/right_arrow.png"/></router-link>
                    <router-link v-if="type==1" class="tabs-button"
                                 :to="{path: '/parent/onlingInflationDetailstoll', query: {id:item.id,money:item.money}}">查看详情<img
                            src="/images/right_arrow.png"/></router-link>
                </div>
            </div>
            <el-pagination
                    class="paginationqx"
                    background
                    @current-change="handleCurrentChange"
                    :page-size="pageSize"
                    layout="prev, pager, next"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import {getBallShowList} from '../../api/api/platform.js';
    import {baseImgPath, basefile} from '@/config/env.js';
    import PlatformCrumb from "@/components/PlatformCrumb.vue";

    export default {
        data() {
            return {
                key: "value",
                pageNum: 1,
                pageSize: 10,
                total: 0,
                type: 0,
                list: []
            }
        },
        components: {
            PlatformCrumb
        },
        created() {
            this.GetList()

        },
        methods: {
            swich(e) {
                this.type = e
                console.log(e);
                this.GetList()
            },
            handleCurrentChange(val) {
                console.log(val);
                this.pageNum = val
                this.GetList()
            },
            back() {
                this.$router.go(-1);//返回上一层
            },
            GetList() {
                getBallShowList({
                    "pageNum": this.pageNum,
                    "pageSize": this.pageSize,
                    'type': this.type,
                }).then(res => {
                    this.list = res.data.list
                    this.total = res.data.total
                });
            },
        },
        filters: {
            filtersImg: function (img) {
                return basefile + img
            }
        }
    }
</script>

<style scoped>
    @import url("css/D-coach-training.css");

    .cur {
        cursor: pointer;
    }

    .paginationqx {
        text-align: right;
        margin-bottom: 40px;
        margin-top: 40px;
    }
</style>
